<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
                <el-input
                        v-model="form.userName"
                        autocomplete="off"
                        placeholder="请输入用户名"
                ></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                <el-input
                        v-model="form.password"
                        autocomplete="off"
                        placeholder="请输入密码"
                ></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                <el-input
                        v-model="form.phone"
                        autocomplete="off"
                        placeholder="请输入手机号"
                ></el-input>
            </el-form-item>
            <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickName">
                <el-input
                        v-model="form.nickName"
                        autocomplete="off"
                        placeholder="请输入昵称"
                ></el-input>
            </el-form-item>
            <el-form-item label="会员卡号" :label-width="formLabelWidth" prop="cardNumber">
                <el-input
                        v-model="form.cardNumber"
                        autocomplete="off"
                        placeholder="请输入会员卡号"
                ></el-input>
            </el-form-item>
            <el-form-item label="微信openid" :label-width="formLabelWidth" prop="openid">
                <el-input
                        v-model="form.openid"
                        autocomplete="off"
                        placeholder="请输入微信openid"
                ></el-input>
            </el-form-item>
            <el-form-item label="微信unionid" :label-width="formLabelWidth" prop="unionid">
                <el-input
                        v-model="form.unionid"
                        autocomplete="off"
                        placeholder="请输入微信unionid"
                ></el-input>
            </el-form-item>
            <el-form-item label="头像" :label-width="formLabelWidth" prop="avatar">
                <fortress-upload
                  type="image"
                  name="avatar"
                  :formData="form"
                ></fortress-upload>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
                <fortress-select
                        v-model="form.gender"
                        :dictList="sexList"
                        placeholder="请选择性别"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="生日" :label-width="formLabelWidth" prop="birthday">
                <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="省" :label-width="formLabelWidth" prop="province">
                <el-input
                        v-model="form.province"
                        autocomplete="off"
                        placeholder="请输入省"
                ></el-input>
            </el-form-item>
            <el-form-item label="省名称" :label-width="formLabelWidth" prop="provinceName">
                <el-input
                        v-model="form.provinceName"
                        autocomplete="off"
                        placeholder="请输入省名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="市" :label-width="formLabelWidth" prop="city">
                <el-input
                        v-model="form.city"
                        autocomplete="off"
                        placeholder="请输入市"
                ></el-input>
            </el-form-item>
            <el-form-item label="市名称" :label-width="formLabelWidth" prop="cityName">
                <el-input
                        v-model="form.cityName"
                        autocomplete="off"
                        placeholder="请输入市名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="区" :label-width="formLabelWidth" prop="area">
                <el-input
                        v-model="form.area"
                        autocomplete="off"
                        placeholder="请输入区"
                ></el-input>
            </el-form-item>
            <el-form-item label="区名称" :label-width="formLabelWidth" prop="areaName">
                <el-input
                        v-model="form.areaName"
                        autocomplete="off"
                        placeholder="请输入区名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="会员来源" :label-width="formLabelWidth" prop="source">
                <fortress-select
                        v-model="form.source"
                        :dictList="sourceList"
                        placeholder="请选择会员来源"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="邀请人" :label-width="formLabelWidth" prop="invitation">
                <el-input
                        v-model="form.invitation"
                        autocomplete="off"
                        placeholder="请输入邀请人"
                ></el-input>
            </el-form-item>
            <el-form-item label="会员等级id" :label-width="formLabelWidth" prop="levelId">
                <fortress-select
                        v-model="form.levelId"
                        :dictList="levelIdList"
                        placeholder="请选择会员等级id"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="会员状态(正常、禁用、黑名单)" :label-width="formLabelWidth" prop="status">
                <fortress-select
                        v-model="form.status"
                        :dictList="MemberStatusList"
                        placeholder="请选择会员状态(正常、禁用、黑名单)"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="审核状态（是否实名）" :label-width="formLabelWidth" prop="auditStatus">
                <fortress-select
                        v-model="form.auditStatus"
                        :dictList="YesNoList"
                        placeholder="请选择审核状态（是否实名）"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="认证类型（实名类型）" :label-width="formLabelWidth" prop="realType">
                <fortress-select
                        v-model="form.realType"
                        :dictList="MemberRealTypeList"
                        placeholder="请选择认证类型（实名类型）"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入备注"
                        v-model="form.remark"
                >
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
            <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import { memberInfo, memberSave, memberEdit } from "@/api/member/member.js";
    import { dictList,enumList,urlList, } from "@/api/public.api.js";
    import * as ftVal from "@/common/fortressValidator.js";
    export default {
        data() {
            return {
                visible: false,
                form: {
                    userName:"",
                    password:"",
                    phone:"",
                    nickName:"",
                    cardNumber:"",
                    openid:"",
                    unionid:"",
                    avatar:"",
                    gender:"",
                    birthday:"",
                    province:"",
                    provinceName:"",
                    city:"",
                    cityName:"",
                    area:"",
                    areaName:"",
                    source:"",
                    invitation:"",
                    levelId:"",
                    status:"",
                    auditStatus:"",
                    realType:"",
                    remark:"",
                },
                formLabelWidth: "120px",
                rules: {
                    phone:[
                          { validator: ftVal.validatePhone,trigger: "blur"},
                      ],
                },
                sexList:[],
                sourceList:[],
                MemberStatusList:[],
                YesNoList:[],
                MemberRealTypeList:[],
                levelIdList:[],
            };
        },
        created() {
        },
        methods: {
            queryDictList(){
                this.sexList = [];
                dictList("sex").then((resp) => {
                  if (resp.code == 0) {
                    this.sexList = resp.data;
                  }
                });
                this.sourceList = [];
                dictList("source").then((resp) => {
                  if (resp.code == 0) {
                    this.sourceList = resp.data;
                  }
                });
            },
            queryEnumList(){
                this.MemberStatusList = [];
                enumList("MemberStatus","").then((resp) => {
                  if (resp.code == 0) {
                    this.MemberStatusList = resp.data;
                  }
                });
                this.YesNoList = [];
                enumList("YesNo","").then((resp) => {
                  if (resp.code == 0) {
                    this.YesNoList = resp.data;
                  }
                });
                this.MemberRealTypeList = [];
                enumList("MemberRealType","").then((resp) => {
                  if (resp.code == 0) {
                    this.MemberRealTypeList = resp.data;
                  }
                });
            },
            queryUrlList(){
                this.levelIdList = [];
                urlList("/member/memberVipLeve/list").then((resp) => {
                  if (resp.code == 0) {
                    if (resp.data) {
                      resp.data.forEach((item) => {
                        this.levelIdList.push({ code: item.id, name: item.name });
                      });
                    }
                  }
                });
            },
            init(id) {
                this.resetForm();
                this.queryDictList();
                this.queryEnumList();
                this.queryUrlList();
                //修改
                if (id) {
                    memberInfo(id).then((resp) => {
                        if (resp.code == 0) {
                            this.$nextTick(() => {
                                this.form = {
                                    ...this.form,
                                    ...resp.data,
                                };
                            });
                        } else {
                            this.$msg({
                                message: resp.msg,
                                type: "error",
                            });
                        }
                    });
                }
                this.visible = true;
            },
            //提交表单数据
            submitForm() {
                this.$refs["form"].validate((valid) => {
                if (valid) {
                    //修改
                    if (this.form.id) {
                        memberEdit(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                            this.$emit("refreshData");
                            this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    //新增
                    } else {
                        memberSave(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                                this.$emit("refreshData");
                                this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
                });
            },
            resetForm() {
                this.form = {
                    userName:"",
                    password:"",
                    phone:"",
                    nickName:"",
                    cardNumber:"",
                    openid:"",
                    unionid:"",
                    avatar:"",
                    gender:"",
                    birthday:"",
                    province:"",
                    provinceName:"",
                    city:"",
                    cityName:"",
                    area:"",
                    areaName:"",
                    source:"",
                    invitation:"",
                    levelId:"",
                    status:"",
                    auditStatus:"",
                    realType:"",
                    remark:"",
                };
                this.$nextTick(() => {
                    if (this.$refs["form"]) {
                        this.$refs["form"].resetFields();
                    }
                });
            },
        },
    };
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 274px;
        padding: 7px;
        overflow: hidden;
        overflow-y: auto;
        font-weight: normal;
    }
</style>
